<template>
  <div class="mod-prod">
    <el-form :model="dataForm" inline size="small">
      <el-form-item label="姓名或手机号：">
        <el-input v-model="dataForm.code" @change="searchChange" placeholder="请输入姓名或手机号"></el-input>
      </el-form-item>
      <el-form-item label="经纪人姓名：">
        <el-select v-model="dataForm.userId" @change="searchChange">
          <el-option v-for="(agent, index) in agentList" :label="agent.name" :value="agent.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="跟进状态：">
        <el-select v-model="dataForm.agentStatus" @change="searchChange">
          <el-option v-for="(item, index) in flowStatusList" :label="item.label" :value="item.value"
                     :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="求职状态：">
        <el-select v-model="dataForm.userStatus" @change="searchChange">
          <el-option v-for="(item, index) in jobStatusList" :label="item.label" :value="item.value" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间：">
        <el-date-picker
          v-model="dataForm.createTime"
          @change="searchChange"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.stop="searchChange">搜索</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-button type="primary" size="small" @click.stop="distribute_Click">批量分配经纪人</el-button>
    </div>
    <avue-crud ref="crud"
               :page="page"
               :data="dataList"
               :table-loading="dataListLoading"
               :option="tableOption"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @on-load="getDataList">

      <template slot-scope="scope"
                slot="remark">
        <div>{{scope.row.remark}}</div>
        <el-button type="text" style="font-size: 14px;font-weight: normal" @click.stop="addRemark(scope.row)">添加备注
        </el-button>
      </template>
      <template slot-scope="scope" slot="userStatus">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">{{getJobStatusTxt(scope.row.userStatus)}}<i class="el-icon-arrow-down el-icon--right" style="color: #999999"></i></span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="'0'+';'+scope.row.id">产生意向</el-dropdown-item>
            <el-dropdown-item :command="'1'+';'+scope.row.id">预约成功</el-dropdown-item>
            <el-dropdown-item :command="'2'+';'+scope.row.id">安排面试</el-dropdown-item>
            <el-dropdown-item :command="'3'+';'+scope.row.id">入职成功</el-dropdown-item>
            <el-dropdown-item :command="'0'+';'+scope.row.id">入职失败</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>

      <template slot-scope="scope"
                slot="menu">
        <el-button type="text"
                   @click="addOrUpdateHandle(scope.row.id)">信息编辑
        </el-button>
      </template>
    </avue-crud>
    <distribute-agent ref="distributeAgent" v-if="showDistributeAgent"
                      @refreshDataList="refreshChange"></distribute-agent>
    <add-remark ref="addRemark" v-if="showRemark" @refreshDataList="refreshChange"></add-remark>
    <customer-update ref="customerUpdate" v-if="showEditCustomer"></customer-update>
  </div>
</template>

<script>
  import { tableOption } from '@/crud/job/customer'
  import distributeAgent from './distributeAgent'
  import addRemark from './addRemark'
  import customerUpdate from './customer-update'
  export default {
    components: {
      distributeAgent,
      addRemark,
      customerUpdate
    },
    data () {
      return {
        showDistributeAgent: false,
        showRemark: false,
        showEditCustomer: false,
        dataForm: {
          agentStatus: '',
          code: '',
          endTime: '',
          startTime: '',
          userStatus: '',
          userId: '',
          createTime: ''
        },
        dataList: [],
        agentList: [],
        flowStatusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '从未跟进',
            value: 0
          },
          {
            label: '待再跟进',
            value: 1
          },
          {
            label: '已跟进',
            value: 2
          }
        ],
        jobStatusList: [
          {
            label: '全部',
            value: ''
          },
          {
            label: '产生意向',
            value: 0
          },
          {
            label: '预约成功',
            value: 1
          },
          {
            label: '安排面试',
            value: 2
          },
          {
            label: '入职成功',
            value: 3
          },
          {
            label: '入职失败',
            value: 4
          }
        ],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        dataListSelections: [],
        dataListLoading: false,
        tableOption: tableOption
      }
    },
    mounted () {
      this.getAgentList()
    },
    methods: {
      // 获取数据列表
      getDataList (page, params) {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/user/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              {
                current: page == null ? this.page.currentPage : page.currentPage,
                size: page == null ? this.page.pageSize : page.pageSize
              },
              params
            )
          )
        }).then(({ data }) => {
          console.log(data)
          this.dataList = data.records
          this.page.total = data.total
          this.dataListLoading = false
        })
      },

      getAgentList () {
        this.$http({
          url: this.$http.adornUrl('/agent/page'),
          method: 'get',
          params: this.$http.adornParams(Object.assign({
            current: 1,
            size: 1000
          }, {}))
        }).then(({ data }) => {
          this.agentList = data.records
        })
      },

      searchChange () {
        if(this.dataForm.createTime&&this.dataForm.createTime.length == 2){
           this.dataForm.startTime = this.dataForm.createTime[0]
           this.dataForm.endTime = this.dataForm.createTime[1]
        }
        else {
          this.dataForm.startTime = ''
          this.dataForm.endTime = ''
        }
        this.page.currentPage = 1
        this.getDataList(this.page, this.dataForm)
      },

      refreshChange () {
        this.getDataList(this.page, this.dataForm)
      },

      // 多选变化
      selectionChange (val) {
        console.log('选中')
        this.dataListSelections = val
      },
      // 分配经纪人
      distribute_Click () {
        if(this.dataListSelections.length === 0) {
          this.$message.error('请至少选择一个客户')
          return
        }
        this.showDistributeAgent = true
        this.$nextTick(() => {
          this.$refs['distributeAgent'].init(this.dataListSelections)
        })
      },

      // 添加备注
      addRemark (row) {
        this.showRemark = true
        this.$nextTick(() => {
          this.$refs['addRemark'].init(row)
        })
      },
      //编辑用户信息
      addOrUpdateHandle (id) {
        this.showEditCustomer = true
        this.$nextTick(() => {
          this.$refs['customerUpdate'].init(id)
        })
      },
      handleCommand(command) {
        let arr = command.split(';')
        this.$http({
          url: this.$http.adornUrl('/user/update/user/status'),
          method: 'post',
          data: this.$http.adornData({
            id: arr[1],
            userStatus: arr[0]
          })
        }).then(({ data }) => {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList(this.page, this.dataForm)
            }
          })
        })

      },

      getJobStatusTxt (status) {
       let job = this.jobStatusList.find((item) => {
          return item.value === status
        })
        return job.label
      }
    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
